import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Overview from './overview';
import ReportSwitch from './switch';
import { Header, Content } from '@alife/devops-ui';
import ProTag from 'components/proTag';
import { enterPage, Perf } from 'utils/track';
import BillingHander from 'components/billing';
import moment from 'moment';
import './index.scss';
import intl from '../../../../../../../../../../locale';

export default class Root extends Component {
  static propTypes = {
    tabKey: PropTypes.string,
    pageSize: PropTypes.number,
    currentPage: PropTypes.number,
    isLoadingTable: PropTypes.string,
    auditLogData: PropTypes.arrayOf(PropTypes.object),
    getAuditData: PropTypes.func,
    setTabKey: PropTypes.func,
    total: PropTypes.number,
  };

  constructor(props) {
    super(props);
    this.state = {
      billingVisible: false,
    };
  }

  componentDidMount() {
    this.props.getOrgServiceSetting();
    document.title = intl.get({
      id: 'code-assets.containers.sensitiveInfoReport.CodeContentSecurityCloudEffect',
      defaultMessage: '代码内容安全 · 云效 Codeup',
    });

    enterPage('Organization-Settings-Security-Code content security', {
      sendPerf: false,
    });
  }

  render() {
    const { infoReportOverview = {}, settings, enterprisePackage } = this.props;
    const { planType } = settings;

    const billingType =
      enterprisePackage &&
      enterprisePackage.plan_type === 'premiumVersion' &&
      (enterprisePackage.status === 'limit' || enterprisePackage.status === 'strictLimit');
    const billingTryOrder =
      enterprisePackage &&
      enterprisePackage.plan_type !== 'premiumVersion' &&
      ((enterprisePackage && enterprisePackage.is_can_use_trial_feature) ||
        (enterprisePackage && enterprisePackage.is_has_used_trial_feature));

    const localValue = window.localStorage.getItem(`codeBillinglimit-${window.config.orgId}`);
    const dataValue = moment().format('YYYY/MM/DD');
    const billingVisibless = localValue
      ? JSON.parse(localValue).filter((va) => va === dataValue)
      : [];
    const limitstatus = enterprisePackage.status === 'limit' && billingVisibless.length > 0;

    // const billingOrgid = enterprisePackage && enterprisePackage.order_info && enterprisePackage.order_info.order_id;
    // const billingOrgidDate = enterprisePackage && enterprisePackage.order_info && enterprisePackage.order_info.end_date ? moment(enterprisePackage.order_info.end_date).diff(moment(), 'day') : -1;

    return (
      <>
        <Header
          title={intl.get({
            id: 'code-assets.containers.sensitiveInfoReport.CodeContentSecurity',
            defaultMessage: '代码内容安全',
          })}
        />
        <Content style={{ position: 'relative' }}>
          <div className="sensitive-info-report">
            <ReportSwitch {...this.props} />
            <Overview {...this.props} />
            {/* infoReportOverview.enabled_project_num */}
            {infoReportOverview.enabled_project_num ? (
              <React.Fragment>
                <Perf page="Organization-Settings-Security-Code content security" />
                <div className="report-switch-left-title" style={{ marginBottom: 4 }}>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.ProblemDataRanking',
                    defaultMessage: '问题数据排行',
                  })}
                  <ProTag planType={planType} />
                </div>
                {/* <Repos {...this.props} />
                <Users {...this.props} /> */}
                <span style={{ color: '#8c8c8c', paddingTop: 10 }}>
                  {intl.get({
                    id:
                      'code-assets.containers.sensitiveInfoReport.YunxiaoInsightPerformanceInsightProvides',
                    defaultMessage:
                      '云效·Insight（效能洞察）提供面向企业研发过程的数据分析，代码问题数据报表已合并至Insight',
                  })}

                  {
                    // eslint-disable-next-line no-nested-ternary
                    billingType && limitstatus ? (
                      <a
                        href="https://devops.aliyun.com/insight"
                        target="_blank"
                        rel="noreferrer"
                        style={{ marginLeft: 8 }}
                      >
                        {intl.get({
                          id: 'code-assets.containers.sensitiveInfoReport.GoNow',
                          defaultMessage: '立即前往',
                        })}
                      </a>
                    ) : billingType || billingTryOrder ? (
                      <span
                        style={{ marginLeft: 8, color: '#1b9aee', cursor: 'pointer' }}
                        onClick={() => this.setState({ billingVisible: true })}
                      >
                        {intl.get({
                          id: 'code-assets.containers.sensitiveInfoReport.GoNow',
                          defaultMessage: '立即前往',
                        })}
                      </span>
                    ) : (
                      <a
                        href="https://devops.aliyun.com/insight"
                        target="_blank"
                        rel="noreferrer"
                        style={{ marginLeft: 8 }}
                      >
                        {intl.get({
                          id: 'code-assets.containers.sensitiveInfoReport.GoNow',
                          defaultMessage: '立即前往',
                        })}
                      </a>
                    )
                  }
                </span>
              </React.Fragment>
            ) : null}
          </div>
          {this.state.billingVisible && (
            <BillingHander
              visi={this.state.billingVisible}
              status={enterprisePackage.status}
              biObj={enterprisePackage}
              isClose={false}
              billingOpenHander={this.props.getOrgplan}
            />
          )}
        </Content>
      </>
    );
  }
}
